<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>登陆功能</title>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<link rel="stylesheet" href="element/theme-chalk/index.css">
		<script src="element/index.js"></script>
	</head>
	<style>

	</style>
	<body>
		<div id="app">
			<el-row type="flex" class="row-bg" justify="center">
				<el-col :span="6">
					<div class="grid-content bg-purple-light">
						<el-form :model="user" status-icon  ref="userForm" label-width="90px"
							class="demo-ruleForm">
							<h3 align="center">健身房系统登陆</h3>
							<el-form-item label="手机号" prop="userName">
								<el-input v-model="user.userPhone" autocomplete="off" placeholder="请输入手机号码"></el-input>
								<el-button type="primary" @click="sendNumber">获取验证码</el-button>
							</el-form-item>
							<el-form-item label="验证码" prop="password">
								<el-input type="password" v-model="user.password" autocomplete="off"
									placeholder="请输入短信验证码">
								</el-input>
							</el-form-item>
							<el-form-item label="登录方式" prop="loginMethod">
								<el-select v-model="user.loginMethod" style="width: 120px" placeholder="选择身份">
									<el-option v-for="status in options" :key="status.value" :label="status.label"
										:value="status.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm">提交</el-button>
								<el-button @click="resetForm('userForm')">重置</el-button>
							</el-form-item>
						</el-form>
					</div>
				</el-col>
			</el-row>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					user: {
						userName: "",
						password: "",
						loginMethod: "",
						userPhone:""
					},
					options: [{
						value: '1',
						label: '会员'
					}, {
						value: '2',
						label: '教练'
					}, {
						value: '3',
						label: '管理员'
					}]
				}
			},
			methods: {
				submitForm() {
					let _this = this;
					//先校验，校验通过再提交
					_this.$refs.userForm.validate((valid) => {
						if (!valid) {
							console.log("表单校验未通过");
						} else {
							console.log(_this.user)
							// 如果选择了会员登陆那么请求路径如下,请求成功跳转页面也不同
							if (_this.user.loginMethod == 1) {
								console.log("表单校验通过");
								console.log("要提交的数据", _this.user)
								axios.post("/member/login", {
									userName: _this.user.userName,
									password: _this.user.password,
								}, {
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded'
									},
									transformRequest: function(data) {
										return Qs.stringify(data);
									}
								}).then(function(res) {
									console.log(res);
									var data = res.data;
									alert("登陆成功")
									location.href = "Member.html";
								}).catch(function() {
									//只有当出现404或500等错误情况的时候会进入catch
									alert('验证码错误');
								});
							}
							//教练登陆
							if (_this.user.loginMethod == 2) {
								axios.post("/coach/login", {
									coachName: _this.user.userName,
									coachPassword: _this.user.password,
									validateCode: _this.user.validateCode
								}, {
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded'
									},
									transformRequest: function(data) {
										return Qs.stringify(data);
									}
								}).then(function(res) {
									let result = res.data;
									alert("登录成功");
									location.href = "coach.html";
								}).catch(error => {
									console.log('Error: ', error.response.data.errMsg)
									_this.errors = {
										code: error.response.data.errMsg
									}
								})
							}
							//管理员登陆
							if (_this.user.loginMethod == 3) {
								axios.post("/adminuser/adminlogin", {
									adminName: _this.user.userName,
									adminPassword: _this.user.password,
									validateCode: _this.user.validateCode,
								}, {
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded'
									},
									transformRequest: function(data) {
										return Qs.stringify(data);
									}
								}).then(function(res) {
									alert("登录成功");
									location.href = "admin.html";
								}).catch(error => {
									console.log('Error: ', error.response.data.errMsg)
									_this.errors = {
										code: error.response.data.errMsg
									}
								})
							}
						}
					});
				},
				resetForm(formName) {
					this.$refs[formName].resetFields();
				},
				sendNumber(){
					var _this =this;
					axios.get("/validateCode/sendNumber",{
						params:{
							number:_this.user.userPhone
						}
					}).then(function(res){
						alert(res.data.data)
					})
				}
			}
		})
	</script>
</html>
